import React, { useEffect, useState } from "react";
import "./My.css";
import axios from "axios";
import { useNavigate } from "react-router-dom";

export default function My() {
  const navigate = useNavigate();
  // 初始值设置为null，表示没有加载数据
  const [user, setuser] = useState(null);
  useEffect(() => {
    getUser();
  }, []);

  const getUser = async () => {
    try {
      const res = await axios.get("http://127.0.0.1:8000/loginInfo");
      console.log(res.data.data); // 确认返回的数据

      if (res.data.code === 200) {
        // 假设返回的是一个包含多个用户信息的数组
        setuser(res.data.data);
      }
    } catch (error) {
      console.log("我的..获取用户信息失败！" + error);
    }
  };

  console.log(user);
  return (
    <div className="my">
      <div className="top-one">
        <div className="top-background">
          <div
            style={{
              width: "100%",
              height: "50px",
              marginLeft: "330px",
              marginTop: "20px",
            }}
          >
            <span onClick={() => navigate("/set")}>
              <svg
                t="1733641719217"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4326"
                width="16"
                height="16"
              >
                <path
                  d="M291.5 771.4H875c28.6 0 51.8 23.2 51.8 51.8 0 28.6-23.2 51.8-51.8 51.8H291.5c-23.4 40.6-71.2 60.4-116.5 48.3-45.3-12.1-76.8-53.2-76.8-100 0-46.9 31.5-87.9 76.8-100 45.3-12.3 93.1 7.5 116.5 48.1z m131.4-207.1H150.1c-28.6 0-51.8-23.2-51.8-51.8 0-28.6 23.2-51.8 51.8-51.8h272.8c18.5-32 52.7-51.8 89.7-51.8s71.2 19.7 89.7 51.8h272.8c28.6 0 51.8 23.2 51.8 51.8 0 28.6-23.2 51.8-51.8 51.8H602.3c-18.5 32-52.7 51.8-89.7 51.8s-71.2-19.8-89.7-51.8zM733.6 150c23.4-40.6 71.2-60.4 116.5-48.3 45.3 12.1 76.8 53.2 76.8 100 0 46.9-31.5 87.9-76.8 100-45.3 12.1-93.1-7.7-116.5-48.3H150.1c-28.6 0-51.8-23.2-51.8-51.8 0-28.6 23.2-51.8 51.8-51.8h583.5z m0 0"
                  p-id="4327"
                ></path>
              </svg>
            </span>
          </div>
        </div>
        <div className="top-title">
          <div className="top-title-left">
            <img
              src={user ? user.img_url : ""}
              alt=""
              className="top-title-left-img"
            />
          </div>
          <div className="top-title-right">
            <div className="top-title-right-item">
              <p className="top-title-right-item-number">168</p>
              <p className="top-title-right-item-love">我喜欢</p>
            </div>
            <div className="top-title-right-item">
              <p className="top-title-right-item-number">3.1K</p>
              <p className="top-title-right-item-love">喜欢我</p>
            </div>
            <div className="top-title-right-item">
              <p className="top-title-right-item-number">363</p>
              <p className="top-title-right-item-love">访客</p>
            </div>
          </div>
        </div>
      </div>
      <div className="ban_xin">
        <p className="ban_xin_name">
          <span className="ban_xin_name_span">
            {/* 如果用户数据已加载，显示用户名，否则显示加载中 */}
            {user ? user.name : "加载中..."}
          </span>
        </p>
        <p className="ban_xin_signature">
          <span>好好学习，天天开心</span>
          <button
            className="ban_xin_update_button"
            onClick={() => navigate("/update_my")}
          >
            编辑资料
          </button>
        </p>
        <div className="ban_xin_lable">
          {user?.xingzuo}
          <span onClick={() => navigate("/lable")}>+添加标签</span>
        </div>
      </div>
      {user
        ? user.dong_tai.map((item) => (
            // console.log(item)
            <div className="my_dong_tai">
              <div className="my_dong_one">
                <div className="dong_time">
                  {user ? user.times : "加载中..."}
                </div>
                <div className="dong_text">
                  {item ? item.text : "加载中..."}
                </div>
                <div
                  className="dong_image"
                  onClick={() => navigate("/my_info_desc?id="+item.id)}
                >
                  <img src={item ? item.img : "加载中..."} alt="" />
                </div>
              </div>
            </div>
          ))
        : "数据加载中...."}
    </div>
  );
}
